@extends('home.base.goods')
@section('content')
<script type="text/javascript" src="{{ url('publics/jquery-1.8.3.min.js') }}"></script>
<style type="text/css">
    #hea{
        /*border:1px solid red;*/
    }
    td{
        width:100px;
        height:60px;
        font-size:14px;
        color:black;
        background:
    }
</style>
<div class="xm-product-box">
    <div class="hd nav-bar J_headNav">
        <div class="container">
            <div class="title">
    <h2>
       {{ $list[0]->goodsname }}
    </h2>
</div>
<div style="margin:60px"></div>
<!-- ********************************************************** -->
<div class="container" id="hea">
    <table style="width:100%">
        <tr>
            <td>小米MIX</td>
            <td>小米note2</td>
            <td>小米手机5s</td>
            <td>小米手机5s Plus</td>
            <td>小红米pro</td>
            <td>红米Note4</td>
            <td>红米手机4</td>
            <td>红米手机3s</td>
            <td>小米手机5</td>
            <td>小米 Max</td>
            <td>红米3x</td>
        </tr>
    </table>
    <div style="margin:50px"></div>
    <div style="width:49%;float:left;pdding:30px">
        <img src='{{ url("picppp/")}}/{{ $list[0]->pic }}' width="550px" height="600px">
    </div>
    <div style="width:50%;float:right">
        <table style="width:100%;background:#F6F8FC">
            <tr>
                <td colspan="2" style="font-size:30px;height:30px" id="pric">
                    购买{{ $list[0]->goodsname }}             
                    <span style="font-size:30px;color:#FF6700" class="spann">{{ $list[0]->price1}}元</span>
                </td>               
            </tr>
            <tr>
                <td style="font-size:15px;color:#FF003A">【{{ $list[0]->about }}】</td>
            </tr>
            <tr>
                <td colspan="2" style="font-size:20px;height:20px">1.选择版本</td>
            </tr>
            <tr>
                <td style="margin:5px;border:1px solid #F36701;width:300px;height:30px;" align="center" class="tdd" id="tdd{{ $list[0]->price1}}" onclick="vars({{ $list[0]->price1}},$(this).html())">{{ $list[0]->version1 }}</td>
            </tr>
            <tr><td style="height:3px"></td></tr>
            <tr>
                <td style="margin:5px;border:1px solid #F36701;width:300px;height:30px;" align="center" class="tdd" id='tdd{{ $list[0]->price2}}' onclick="vars({{ $list[0]->price2}},$(this).html())">{{ $list[0]->version2 }}</td>
            </tr>
            <tr><td style="height:3px"></td></tr>
            <tr>
                <td style="margin:5px;border:1px solid #F36701;width:300px;height:30px;" align="center" class="tdd" id='tdd{{ $list[0]->price3}}'onclick="vars({{ $list[0]->price3}},$(this).html())">{{ $list[0]->version3 }}</td>
            </tr>
            <tr><td style="height:3px"></td></tr>
            <tr>
                <td style="margin:5px;border:1px solid #F36701;width:300px;height:30px;" align="center" class="tdd" id='tdd{{ $list[0]->price4}}' onclick="vars({{ $list[0]->price4}},$(this).html())">{{ $list[0]->version4 }}</td>
            </tr>
            <tr><td style="height:3px"></td></tr>
            <tr>
                <td style="margin:5px;border:1px solid #F36701;width:300px;height:30px;" align="center" class="tdd" id='tdd{{ $list[0]->price5}}' onclick="vars({{ $list[0]->price5}},$(this).html())">{{ $list[0]->version5 }}</td>
            </tr>
            <script type="text/javascript">
                var tdd= $('.tdd');
                // console.log(tdd);
                for(var i = 0; i < tdd.length; i++){
                    if($(tdd[i]).html()==''){
                        $(tdd[i]).remove();
                    }
                }
                function vars(price){
                    $('.tdd').css('background-color','#F6F8FC');
                    $('#tdd'+price).css('background-color','#F36701');
                    $('#pric').children('.spann').remove();
                    $('#pric').append('<span style="font-size:30px;color:#FF6700" class="spann">'+price+'元</span>');
                }
            </script>
            <tr>
                <td colspan="2" style="font-size:20px">2.选择颜色</td>
            </tr>       
            <tr>
                <td style="margin:5px;border:1px solid #F36701;width:300px;height:30px" align="center" class="tddd" id='tddd1' onclick="color(1)">{{ $list[0]->color1 }}</td>
            </tr>
            <tr><td style="height:3px"></td></tr>
            <tr>
                <td style="margin:5px;border:1px solid #F36701;width:300px;height:30px" align="center" class="tddd" id='tddd2' onclick="color(2)">{{ $list[0]->color2 }}</td>
            </tr>
            <tr><td style="height:3px"></td></tr>
            <tr>
                <td style="margin:5px;border:1px solid #F36701;width:300px;height:30px" align="center" class="tddd" id='tddd3' onclick="color(3)">{{ $list[0]->color3 }}</td>
            </tr>
            <tr><td style="height:3px"></td></tr>
            <tr>
                <td style="margin:5px;border:1px solid #F36701;width:300px;height:30px" align="center" class="tddd" id='tddd4' onclick="color(4)">{{ $list[0]->color4 }}</td>
            </tr>
            <tr><td style="height:3px"></td></tr>
            <tr>
                <td style="margin:5px;border:1px solid #F36701;width:300px;height:30px" align="center" class="tddd" id='tddd5' onclick="color(5)">{{ $list[0]->color5 }}</td>
            </tr>
            <tr><td style="height:3px"></td></tr>
            <script type="text/javascript">
                var tddd= $('.tddd');
                for(var i = 0; i < tddd.length; i++){
                    if($(tddd[i]).html()==''){
                        $(tddd[i]).remove();
                    }
                }
                function color(idd){
                    $('.tddd').css('background-color','#F6F8FC');
                    $('#tddd'+idd).css('background-color','#F36701');
                    $('.tddd').removeAttr('title');
                    $('#tddd'+idd).attr('title',idd);
                }
            </script>
            <tr>
                <td colspan="2"  id="aja">
                    <div style="margin:10px"></div>
                        <div style="background:#FF6700;color:#FFFFFF;height:35px;width:120px;font-size:25px;padding:5px;padding-left:30px" onclick="doClose()">
                        下一步
                        </div>
                </td>
            </tr>
        </table>
        <form name="myform">
            <input type="hidden" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" name="goodspic" value="{{ $list[0]->picture }}">
            <input type="hidden" name="goodsname" value="{{ $list[0]->goodsname }}">
            <input type="hidden" name="goodsid" value="{{ $list[0]->goodsdetid }}">
            <input type="hidden" name="userid" value="{{ $userid }}">
        </form>
        <script type="text/javascript">
            function doClose()
            {
                // var goodsn = $('#pric').html();
                // 去除字串中的(取<span style="font-size:30px;color:#FF6700" class="spann">前面的字符串;
                // var str = goodsn.indexOf('<span style="font-size:30px;color:#FF6700" class="spann">');
                // var str1 = goodsn.substring(0,str);
                // //去除字串前面 "购买";
                // var goodsname = str1.replace(/\s*购买\s*/,'');
                // console.log(goodsname);
                var userid = $('input[name="userid"]').val();
                var goodsid = $('input[name="goodsid"]').val();
                var goodspic = $('input[name="goodspic"]').val();
                var goodsname = $('input[name="goodsname"]').val();
                // console.log(goodsname);
                var price = parseFloat($('#pric').children('.spann').text());
                var _token = $('input[name="_token"]').val();
                var tddd = $('.tddd');
                for (var i=0; i<tddd.length;i++) {
                    if (!$(tddd[i]).attr('title')=='') {
                        id = $(tddd[i]).attr('title');
                        var color = $('#tddd'+id).html();
                            $.ajax({
                            url:'/home/carajax',
                            type:'post',
                            async:false,                //是否异步
                            data:{userid:userid,goodsid:goodsid,goodspic:goodspic,goodsname:goodsname,price:price,color:color,_token:_token},               //发送的数据
                            dataType:'json',            //响应的数据类型
                            error:function()            //失败时回调函数
                            {
                                alert('ajax请求失败');
                            },
                            success:function(data)      //成功时回调函数
                            {
                                if(data>0){
                                    $('#aja').children('div').remove();
                                    $('#aja').append('<div style="margin:10px"></div><div style="background:#FF6700;color:#FFFFFF;height:35px;width:120px;font-size:25px;padding:5px;padding-left:30px"><a href="/home/car">去结算</a></div>');
                                }
                            }
                        });
                    }
                }
                        
            }
    </script>
    </div>
</div>
<!-- ********************************************************** -->
<div style="margin:50px;background:#FF6700;color:#FFFFFF;height:35px;width:100%;font-size:25px;margin:0 auto;text-align:center">了解更多</div>
<div class="container">
    <div>
        <img src="{{ url('picture/红米手机3x2.gif') }}" style="width:100%">
    </div>
    <div>
        <img src="{{ url('picture/红米手机3x1.gif') }}" style="width:100%">
    </div>
    <div>
        <img src="{{ url('picture/红米手机3x3.gif') }}" style="width:100%">
    </div>
     <div>
        <img src="{{ url('picture/红米手机3x4.gif') }}" style="width:100%">
    </div>
    <div>
        <img src="{{ url('picture/红米手机3x5.gif') }}" style="width:100%">
    </div>
</div>
</div>
<!-- ************************************************************* -->
<div class="xm-product-box">
    <div class="hd nav-bar J_headNav">
        <div class="container">
            <div class="title">
    <h2>
       {{ $list[0]->goodsname }}
    </h2>
</div>
@stop
